import React from 'react'
import { TabBar } from 'antd-mobile';
import { withRouter } from 'react-router-dom'
import PropTypes from 'prop-types'


@withRouter
class NavLinkBar extends React.Component {

    static propTypes = {
        data: PropTypes.array.isRequired
    }

    render() {

        const {pathname} = this.props.location
        const navList = this.props.data.filter(item=>!item.hide)  //把hide 的元素过滤出来
        
        return (
            <TabBar>
                {
                    navList.map((item)=>(
                        <TabBar.Item
                        title={item.text}
                        key="item.path"
                        badge={0}
                        icon={{uri: require(`./img/${item.icon}.png`)}}
                        selectedIcon={{uri: require(`./img/${item.icon}-active.png`)}}
                        selected={pathname == item.path}
                        onPress={() => {
                            this.props.history.push(item.path)
                        }}
                    >
                    </TabBar.Item>
                    ))
                }
            </TabBar>
        )
    }
}



export default NavLinkBar